<template>
    <div>
        <div style="text-align:left">
             <el-input v-model="tableDataName" size="small" placeholder="请输入姓名" style="width:240px;margin-left: 400px"></el-input>
            <el-button type="primary" size="small" @click="searchUser">搜索</el-button>
             <el-button type="primary" size="small" @click="openData">展示数据</el-button>
             <el-button type="success" size="small" @click="handleAdd()">新增</el-button>
            <el-button type="primary" size="small" @click="removeUsers()" >批量删除</el-button>
        </div>
        <div>
            <el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
                <el-table-column type="selection" width="60">
                </el-table-column>
                <el-table-column type="index" width="60">
                </el-table-column>
                <el-table-column prop="jid" label="jid">
                </el-table-column>
                <el-table-column prop="name"  label="名字" width="120" sortable>
                </el-table-column>
                <el-table-column prop="morning" label="计划" width="100" sortable>
                </el-table-column>
                <el-table-column prop="evening" label="总结" min-width="120" sortable>
                </el-table-column>
                <el-table-column prop="summary" label="反思" min-width="120" sortable>
                </el-table-column>
                <el-table-column prop="date" label="日期" min-width="180" sortable>
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <!-- <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">新增</el-button> -->
                        <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, users)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--新增/编辑界面-->
        <el-dialog :title="titleMap[dialogStatus]" :visible.sync="FormVisible" :close-on-click-modal="false" class="edit-form"
                   :before-close="handleClose">
            <el-form :model="Form" label-width="80px" :rules="editFormRules" ref="Form">
                <el-form-item label="名字" prop="name">
                    <el-input v-model="Form.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="计划">
                    <el-input v-model="Form.morning"></el-input>
                </el-form-item>
                <el-form-item label="总结">
                    <el-input v-model="Form.evening"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-input v-model="Form.summary"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="handleCancel('Form')">取消</el-button>
                <el-button v-if="addBtnshow" type="primary" @click.native="confirmAdd('Form')">确定</el-button>
                <el-button v-if="editBtnshow" type="primary" @click.native="confirmEdit('Form')">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    var _index;
    export default {
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                titleMap: {
                    addEquipment:'新增',
                    editEquipment: "编辑"
                },
                //新增和编辑弹框标题
                Form: {
                    id: 0,
                    name: '',
                    price: 0,
                    reserve:'',
                    data: '',
                    desc: '',
                },
                users:[
                    {jid:'',name:'',morning:'',evening:'',date:'',summary:''}
                ],
                editFormRules:{
                    name: [
                        { required: true, message: '请输入名字', trigger: 'blur' }
                    ],
                    morning: [
                        { required: true, message: '请输入计划', trigger: 'blur' }
                    ],
                    evening: [
                        { required: true, message: '请输入总结', trigger: 'blur' }
                    ],
                },
                FormVisible: false,
                currentRow:[],
                ids:[],
                listLoading:'',
                addBtnshow:false,
                editBtnshow:false,
                editLoading:'',
                dialogStatus: '',
                selected:[],
                editid:'',
                searchForm:[]
            }
        },
        methods: {
            // searchUser(){
            //   console.log(this.searchForm.name)
            //   var username = this.searchForm.name;
            //   let resultdata = this.userlist.filter(users =>{
            //     if(users.name == username|| users.name.indexOf(username) != -1)
            //     {
            //       console.log("已找到！")
            //       return true;
            //     }
            //   });
            //   this.userlist = resultdata;
            // },
            selsChange:function(val){  //点击选中
                console.log(val);
                this.selected = val;
            },
            // 直接新增一行空行
            // handleAdd(val) {
            //   this.dialogStatus = 'create';
            //   this.ViewVisible = true;
//       },
//       addRow(users,event){//新增一行
//  //之前一直想不到怎么新增一行空数据，最后幸亏一位朋友提示：表格新增一行，其实就是源数据的新增，从源数据入手就可以实现了，于是 恍然大悟啊！
//     this.FormVisible = true;
//     users.push({ name: '', price: '',reserve:'',desc:''})
//  },
            // 点击新增
            addRow(users,event) {
                this.FormVisible = true;
                this.Form = {
                    id: 0,
                    name: '',
                    price: 0,
                    reserve:'',
                    data:'',
                    desc: '',
                };
                this.dialogStatus = "addEquipment"
                this.addBtnshow = true
                this.editBtnshow = false
            },
            // 点击确定（新增）
            confirmAdd() {
                // this.users = this.users || []
                this.users.push({
                    name: this.Form.name,
                    price: this.Form.price,
                    reserve: this.Form.reserve,
                    data: this.Form.data,
                    desc: this.Form.desc
                })
                // storage.set('users', this.users);
                this.FormVisible = false;
            },
            //点击编辑
            handleEdit:function(index, row) {
                this.FormVisible = true;
                this.Form = Object.assign({}, row); //这句是关键！！！
                _index = index;
                console.log(index);
                console.log(_index);
                this.dialogStatus = "editEquipment"
                this.addBtnshow = false
                this.editBtnshow = true
            },
            // 点击确定（编辑）
            confirmEdit(){
                var editdata = _index;
                console.log(editdata);
                this.users[editdata].name=this.Form.name;
                this.users[editdata].price=this.Form.price;
                this.users[editdata].reserve=this.Form.reserve;
                this.users[editdata].data=this.Form.data;
                this.users[editdata].desc=this.Form.desc;
                this.FormVisible = false;
                // 我的 更新的时候就把弹出来的表单中的数据写到要修改的表格中
                // var postdata = {
                //   name: this.Form.name,
                //    price: this.Form.price,
                //    reserve: this.Form.reserve,
                //    data: this.Form.data,
                //    desc: this.Form.desc,
                // }
                //这里再向后台发个post请求重新渲染表格数据
                // this.$set(this.users,'name')
                // let studenteList=this.Form;
                // console.log(studenteList);
                // let {name,price,reserve,data,desc} = studenteList;
            },
            //点击关闭dialog
            handleClose(done) {
                //  done();
                //  location.reload();
                this.FormVisible = false;
            },
            //点击取消
            handleCancel(formName) {
                this.FormVisible = false;
            },
            // 删除
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var _this=this;
                    this.$message({
                        // delete:row.splice(index, 1),
                        type: 'success',
                        message: '删除成功!',
                        delete: row.splice(index, 1),   //splice 删除对象是数unfuntion组   如果是对象会出现错误  row.solice not is
                        url: this.$router.push('/detelerz'+_this.users.jid)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            removeUsers() {
                this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' })
                    .then(() => {
                        console.log(this.selected);
                        var ids = [];
                        //提取选中项的id
                        $.each(this.selected,(i, users)=> {
                            ids.push(users.id);
                        });
                        // 向请求服务端删除
                        alert(ids)
                        this.$axios.post('/detelerz',ids).then(resp=>{
                            alert(resp.data.message)
                        })
                    })
                    .catch(() => {
                        this.$Message('已取消操作!');
                    });
            }
        },
        created() {
            var _this=this;
            this.$axios.post('QueryAllrz').then(resp=>{
               _this.users=resp.data.result.data
                console.log(_this.users)
            })
        }
    }
</script>
<style>
</style>


